<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单确认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../css/wx/mui.min.css">
    <link rel="stylesheet" href="../../../css/wx/app.css">
    <link rel="stylesheet" href="../../../css/wx/style.css"/>
    <link rel="stylesheet" href="../../../css/wx/wx-iconfont.css"/>

    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/gwat310/gwat310_02"],
            cb: function (o) {

                // 不影响初始页面的js, 可以延迟引入
                require(['wx-iconfont'], $.noop);

                app.requireCss(['icons-extra'], doc);

            }
        };
    </script>
    <script data-main="../../../js/wx/public/config" src="../../../js/require.js"></script>

    <style>
        .mui-control-content {
            background: none;
            min-height: 215px;
        }

        .mui-control-content .mui-loading {
            margin-top: 50px;
        }

        .goodModal {
            position: absolute;
            z-index: 999;
            bottom: 0;
            height: 45%;
            left: 0;
            right: 0;
            background: #fff;
            padding: 10px;
        }

        .goodModal .goodsImg {
            width: 20%;
            margin-top: -30px;
            margin-bottom: 15px;
        }

        .goodModal .goodsImg img {
            max-width: 100%;
            border-radius: 4px;
        }

        .lists_tips span {
            display: inline-block;
            padding: 1px 6px;
            border: 1px solid #dadada;
            border-radius: 4px;
            font-size: 12px;
            /*color: #FF7100;*/
            margin-right: 10px;
        }

        .goodModal p {
            color: #333;
            margin-bottom: 6px;
        }

        .group_title {
            margin-bottom: 15px;
        }

        .goodModal .addressBtn button {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            font-size: 16px;
            letter-spacing: 2px;
            background: #FF7100;
            border: none;
        }

        .chooseBtn {
            display: inline-block;
            padding: 1px 6px;
            border: 1px solid #005768;
            border-radius: 4px;
            font-size: 12px;
            color: #005768;
            margin-left: 10px;
        }

        .mui-slider-item {
            border: none !important;
        }

        .navbar-mui button {
            border: none;
        }

        .textmar .goodsinfo p span {
            color: #000;
        }

        .mui-table-view {
            background: none;
        }

        .mui-scroll {
            height: 100%;
            overflow-y: auto;
        }

        #item2mobile {
            background: #fff;
        }

        .goodsInfo .mui-slider-indicator .mui-scroll {
            width: 100%;
            background-color: #273A60;
            display: flex;
            justify-content: space-between;
            padding: 0 70px;
        }

        .goodsInfo .mui-slider-indicator .mui-scroll a {
            width: 100%;
            display: block;
            padding: 0;
        }

        .goodsInfo .mui-slider-group .mui-slider-item {
            margin-top: 0;
        }

        .goodsInfo .mui-slider-group .mui-slider-item a {
            transform: translateY(0);
            -webkit-transform: translateY(0);
        }

        /*.goodsInfo .mui-fullscreen {*/
        /*overflow: inherit;*/
        /*}*/

        #goodsIn,
        #item1mobile {
            overflow-y: auto;
        }

        #sliderProgressBar {
            position: absolute;
        }

        .goodsInfo .mui-segmented-control.mui-segmented-control-inverted .mui-control-item,
        .mui-action-back {
            color: #000;
        }

        .goodsInfo .mui-slider-indicator .mui-scroll {
            background-color: #fff
        }
        .noneContent {top: 0;}
        .mui-input-group:after {height: 0}
    </style>
</head>

<body>

<div class="mui-content goodsInfo wf-listGoods" id="gwat310_02">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl"
             class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    商品
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    详情
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    评价
                </a>
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
            </div>
        </div>

        <div class="mui-slider-group" id="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-table-view">
                            <div  class="mui-slider">
                                <div class="mui-slider-group mui-slider-loop">
                                    <div class="mui-slider-item" style="text-align: center;">
                                        <!--<a href="javascirpt:;">-->
                                        <img :src="good.GWAM015 | goodsImgsUtils" style="height: 250px;width:auto"/>
                                        <!--</a>-->
                                    </div>
                                </div>

                            </div>
                            <div class="text-mui textmar boxShow" style="background: #fff;margin: 0;">
                                <div class="goodsinfo">
                                    <p>{{good.GWAML003}}</p>
                                    <div style="display: flex;justify-content: space-between;">
                                        <p class="mui-ellipsis">¥{{good.GWCS004}}/台</p>
                                        <p class="mui-ellipsis">数量:{{good.GWCS003}}</p>
                                        <p class="mui-ellipsis">总价:¥{{good.GWCS005}}</p>
                                    </div>
                                    <p v-for="val in good.characteristics">{{val.GWAIL003}}:
                                        <a href="javascript:;" class="chooseBtn">{{val.GWAJL004}}</a>
                                    </p>
                                </div>
                            </div>
                            <form class="mui-input-group" style="margin-top: 10px;margin-bottom: 55px;padding-bottom: 10px;">
                                <div class="mui-input-row">
                                    <label>序列号</label>
                                    <input type="text" class="mui-input-clear" v-model="ud.GWCS019">
                                    <span class="iconfont icon icon-061 posIcon wf-font-color"
                                          @tap.stop="btn_gwcs019"></span>
                                </div>
                                <div class="mui-input-row">
                                    <label>投入使用日期</label>
                                    <input type="date" class="mui-input-clear" v-model="ud.GWCS016">
                                </div>
                                <div class="mui-input-row">
                                    <label>合同编号</label>
                                    <input type="text" class="mui-input-clear" v-model="ud.GWCS104">
                                    <span class="iconfont icon icon-061 posIcon wf-font-color"
                                          @tap.stop="btn_gwcs104"></span>
                                </div>
                                <div class="mui-input-row wf-imageUpdates">
                                    <label style="margin-top: 10px;">合同照片</label>
                                    <div class="wf-imageUpdate">
                                        <div class="tackPoto">
                                            <div class="div-autoline-boxDiv">
                                                <template v-for="(img,inx) in GWCS017S">
                                                    <div class="div-autoline-parent">
                                                        <div class="child">
                                                            <i @tap.stop="delimgGwcs017(inx)"
                                                               class="mui-icon mui-icon-closeempty posIcon"></i>
                                                            <img :src="img|orderImgsUtils">
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-for="(img,inx) in good.imgs">
                                                    <div class="div-autoline-parent">
                                                        <div class="child">
                                                            <i @tap.stop="delimg(inx)"
                                                               class="mui-icon mui-icon-closeempty posIcon"></i>
                                                            <img :src="img.img">
                                                        </div>
                                                    </div>
                                                </template>
                                                <div v-show="imgs.length<9" @tap.stop="addImgs"
                                                     class="div-autoline-parent">
                                                    <div class="child start"><i class="icon iconfont icon-05"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mui-input-row wf-imageUpdates">
                                    <label>备注</label>
                                    <textarea v-model="ud.GWCS050"></textarea>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div id="scroll2" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="wf-infoTab">
                            <ul>
                                <li class="active">商品介绍</li>
                                <li>规格参数</li>
                                <li>包装售后</li>
                            </ul>
                            <div class="tabCont">
                                <div class="group">
                                    <p>{{good.GWAM016}}</p>
                                </div>
                                <div class="group" style="display: none">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td width="50%">商品编号</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td width="50%">规格</td>
                                            <td>{{good.GWAM017}}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="group" style="display: none">
                                    <!--<p>-->
                                    <!--<button class="wf-updlown">供货清单下载</button>-->
                                    <!--</p>-->
                                    <p><a href="../../files/004.pdf" class="wf-updlown">供货清单下载1</a></p>
                                    <p></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content wf-classes-info">
                <div id="scroll3" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-input-row mui-checkbox mui-left flexl">
                            <label>只看当前商品</label>
                            <input @change="statusChange" v-model="others.status"
                                   true-value="1" :false-value="0" type="checkbox">
                            <p style="flex: 38%;font-size: 14px;line-height: 37px;text-align: right;padding-right: 10px;">
                                好评度{{others.pv}}%</p>
                        </div>

                        <div class="wf-evaluate-user">
                            <div class="wf-evaluate">
                                <p :class="others.key==0?'active':''" @tap.stop="getpj(0)" id="all">
                                    全部{{others.count}}</p>
                                <p :class="others.key==1?'active':''" @tap.stop="getpj(1)" id="good">
                                    好评{{others.count1}}</p>
                                <p :class="others.key==2?'active':''" @tap.stop="getpj(2)" id="medium">
                                    中评{{others.count2}}</p>
                                <p :class="others.key==3?'active':''" @tap.stop="getpj(3)" id="bad">
                                    差评{{others.count3}}</p>
                            </div>
                            <h4 class="title" style="padding: 12px 15px;">评价</h4>
                            <commentsitem :model="items"></commentsitem>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar-mui flexl" id="footDiv">
            <button type="button" class="mui-btn mui-btn-royal mui-btn-block wf-second-bg" @tap.stop="reback">返回
            </button>
            <button type="button" class="mui-btn mui-btn-royal mui-btn-block wf-pulic-bg" @tap.stop="save">确定</button>
        </div>

    </div>

</div>
<script id="comments-template" type="text/x-template">
    <div>
        <div v-for="val in model" class="wf-talk-lists">

            <div class="wf-evaluate-listH">
                <p>{{val.gwcw009}}</p>
                <div class="wf-list-user">
                    <span class="icons ri">
					<i data-index="1"
                       :class="'mui-icon '+ (val.gwcw005>=1?'mui-icon-star-filled':'mui-icon-star')"></i>
					<i data-index="2"
                       :class="'mui-icon '+ (val.gwcw005>=2?'mui-icon-star-filled':'mui-icon-star')"></i>
					<i data-index="3"
                       :class="'mui-icon '+ (val.gwcw005>=3?'mui-icon-star-filled':'mui-icon-star')"></i>
                    <i data-index="4"
                       :class="'mui-icon '+ (val.gwcw005>=4?'mui-icon-star-filled':'mui-icon-star')"></i>
                    <i data-index="5"
                       :class="'mui-icon '+ (val.gwcw005>=5?'mui-icon-star-filled':'mui-icon-star')"></i>
				</span>
                </div>
                <p>{{val.gwcwdocdate}}</p>
            </div>
            <div class="wf-evaluate-listB">
                <p>{{val.gwcw006}}</p>
            </div>

        </div>
    </div>

</script>
</body>

</html>